<!DOCTYPE HTML>
<!--
Copyright 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="theme-color" id="theme-color">
  <!-- Placeholder for CSP. -->
  $1
  <title>$i18n{title}</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  <!-- Placeholder for CSS. -->
  $2
</head>
<body class="$3">
  <div id="content-wrap">
    <div id="main-content">
      <div id="settings-container" class="desktop-only">
        <button id="settings-toggle" type="button"
            aria-label="$i18n{customizeAppearance}" tabindex=0>
          <i class="material-icons">&#xE165</i>
        </button>
        <div id="dialog-backdrop"></div>
        <dialog id="settings-dialog">
          <div id="settings-header">
            <h1>$i18n{customizeAppearance}</h1>
          </div>
          <div id="settings-fields">
            <div class="setting font-family-container">
              <label id="font-family-label" class="screen-reader-only">
                $i18n{fontStyle}
              </label>
              <select id="font-family-selection" aria-labelledby="font-family-label" name="font-family">
                <option value="sans-serif" selected>$i18n{sansSerifFont}</option>
                <option value="serif">$i18n{serifFont}</option>
                <option value="monospace">$i18n{monospaceFont}</option>
              </select>
              <i class="material-icons" id="arrow-drop-down">&#xe5c5</i>
            </div>
            <div class="setting">
              <fieldset id="theme-selection">
                <legend class="screen-reader-only">
                  $i18n{pageColor}
                </legend>
                <ul>
                  <li class="theme-option">
                    <input type="radio" name="theme" value="light"
                       aria-label="$i18n{light}" id="theme-option-light" class="light" checked>
                    <div class="checkmark"><i class="material-icons" aria-hidden="true">&#xE86c</i></div>
                  </li>
                  <li class="theme-option">
                    <input type="radio" name="theme" value="sepia"
                       aria-label="$i18n{sepia}" id="theme-option-sepia" class="sepia">
                    <div class="checkmark"><i class="material-icons" aria-hidden="true">&#xE86c</i></div>
                  </li>
                  <li class="theme-option">
                    <input type="radio" name="theme" value="dark"
                       aria-label="$i18n{dark}" id="theme-option-dark" class="dark">
                    <div class="checkmark"><i class="material-icons" aria-hidden="true">&#xE86c</i></div>
                  </li>
                </ul>
              </fieldset>
            </div>
            <div class="setting" id="font-size-wrapper">
              <label id="font-size-label" class="screen-reader-only">
                $i18n{fontSize}
              </label>
              <input aria-labelledby="font-size-label"
                     id="font-size-selection"
                     type="range"
                     name="font-size"
                     list="tickmarks"
                     min="0"
                     max="9"
                     value="2">
              <div class="label-container">
                <span id="slider-label-min">$i18n{small}</span>
                <span id="slider-label-max">$i18n{large}</span>
              </div>
            </div>
          </div>
            <button id="close-settings-button" type="button"
                aria-label="$i18n{close}" tabindex=0>
              <i class="material-icons">close</i>
            </button>
        </dialog>
      </div>
      <article>
        <header id="article-header">
          <div id="title-collapse">
            <div class="vertical-center-outer">
              <div class="vertical-center-inner">
                <h1 id="title-holder"><noscript>$i18n{title}</noscript></h1>
              </div>
            </div>
          </div>
        </header>
        <div id="content"><noscript>$4</noscript></div>
      </article>
      <div id="loading-indicator" class="visible">
        <!-- SVG material loading spinner. -->
        $5
      </div>
    </div>
  </div>
</body>
</html>
